﻿
@{
    ViewBag.Title = "ListarSectores";
    Layout = "~/Views/Shared/_layoutGeneral.cshtml";
}

<!doctype html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>jQuery UI Spinner - Map</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="/resources/demos/external/jquery.mousewheel.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <script>

        $(function () {
            function latlong() {
                return new google.maps.LatLng($("#lat").val(), $("#lng").val());
            }
            function position() {
                map.setCenter(latlong());
            }
            $("#lat, #lng").spinner({
                step: .001,
                change: position,
                stop: position
            });

            var map = new google.maps.Map($("#map")[0], {
                zoom: 15,
                center: latlong(),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });


            /* Agregar un Marcador */
            var marker = new google.maps.Marker({
                position: latlong,
                map: map
            });

            /* Personalizar marcar */

            var image = "/Views/Sector/marker-pink.png";
            var myLatLng = new google.maps.LatLng(-7.155613, -78.514849);
            var nuevoMarker1 = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: image,
                title: 'Casa de Majito'
            });

            /* contenido del div del marker*/
            var infowindow1 = new google.maps.InfoWindow({
                content: createInfo('Casa de Majito', '<br/>Visita la web de mi proyecto SILAS<br/><a title="Click" href="#">Click Aqui</a>')
            });

            /* div del marker */
            function createInfo(title, content) {
                return '<div class="infowindow"><strong>' + title + '</strong> ' + content + '</div>';
            }

            /* Evento Click del marker */
            google.maps.event.addListener(nuevoMarker1, 'click', function () {
                infowindow1.open(map, nuevoMarker1);
            });

        });
    </script>
    
    <style>
    #map {
        width:500px;
        height:500px;
    }
    </style>
</head>
<body>
 
<label for="lat">Latitude</label>
<input id="lat" name="lat" value="-7.155613" />
<br />
<label for="lng">Longitude</label>
<input id="lng" name="lng" value="-78.514849" />
 
<div id="map"></div>
 
 
</body>
</html>